<!--
 * @Author: @zhangrui-1997 17805271997@163.com
 * @Date: 2023-08-10 16:02:30
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2023-12-28 10:12:52
 * @FilePath: \vue3-ts\src\views\bus\components\echarts\BarGraph.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="PieEcharts" class="PieEcharts" :style="style"></div>
</template>
  
  <script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  dataSource: {
    type: Object,
    default: false,
  },
});

// 定义值
let PieEcharts = ref(); //ref的应用
let style = reactive({
  width: "100%",
  height: "100%",
});

// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(PieEcharts.value);
  let option = {
    legend: {
      orient: "vertical",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        fontSize: 12,
        color: "#bac0c0",
      },
      top: "20%",
      itemGap: 5,
      right: 10,
      data: props.dataSource.name,
    },
    color: ["#00acee", "#52cdd5", "#52b6d5", "#79d9f1", "#a7e7ff", "#c8efff"],
    tooltip: {
      trigger: "item",
      textStyle: {
        fontSize: 12,
        color: "#fff", //设置文字颜色
      },
      backgroundColor: "#061436", // 背景
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "80%"],
        center: ["40%", "50%"],
        roseType: "area",
        data: props.dataSource.data,
        label: {
          normal: {
            show: true,
            formatter: "{b} \n{c}辆",
            textStyle: {
              color:"#bac0c0"
            },
            textOutline: 'none',
            position: "outside",
          },
          emphasis: {
            show: true,
          },
        },
      },
    ],
  };
  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.dataSource,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>
  
  <style lang="less" scoped></style>
  